<template>
  <div class="dashboard">
    <v-chart :option="option" autoresize class="chart" />
    <v-chart :option="option1" autoresize class="chart" />
    <v-chart :option="option2" autoresize class="chart" />
    <v-chart :option="option3" autoresize class="chart" />
  </div>
</template>
<script lang="ts" setup>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, LineChart, PieChart } from 'echarts/charts'
import {
  GridComponent,
  LegendComponent,
  TitleComponent,
  TooltipComponent
} from 'echarts/components'
import VChart, { THEME_KEY } from 'vue-echarts'
import { onBeforeMount, provide, ref } from 'vue'
import { getUserAddData, getUserData } from '@/api/dashboard'

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  BarChart,
  GridComponent,
  LineChart
])
provide(THEME_KEY, 'dark')

onBeforeMount(() => {
  getUserData().then((res) => {
    console.log(res)
    res.data.data.forEach((data: { name: any; count: any }) => {
      userData.value.push({
        name: data.name,
        value: data.count
      })
      roleType.value.push(data.name)
    })
  })
  getUserAddData().then((res) => {
    res.data.data.forEach((data: { date: any; count: any }) => {
      date.value.push(data.date)
      count.value.push(data.count)
    })
  })
})
// 用户角色信息
const userData = ref([{}])
const roleType = ref([''])
const option = ref({
  title: {
    text: '用户角色数据',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: roleType
  },
  series: [
    {
      name: 'Traffic Sources',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: userData.value,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})
// 近期用户新增数据
const date = ref<string[]>([])
const count = ref<number[]>([])
const option1 = ref({
  title: {
    text: '用户增长数据',
    left: 'center'
  },
  tooltip: {},
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['新增用户']
  },
  xAxis: {
    data: date.value
  },
  yAxis: {},
  series: [
    {
      name: '新增用户',
      type: 'line',
      data: count.value
    }
  ]
})
// 近期物品成交量数据
const option2 = {
  title: {
    text: '物品租赁数据',
    left: 'center'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
}
//
const option3 = {
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [30, 80],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 90, name: 'rose 1' },
        { value: 67, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 79, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' }
      ]
    }
  ]
}
</script>
<style lang="less" scoped>
.dashboard {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background-color: #ffffff;

  .chart {
    height: 36vh;
    width: 36vw;
    margin: 20px;
    box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
  }
}
</style>
